<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width:300px;
            height:400px;
            background-color: antiquewhite;
            margin:0 auto;
            margin-top:3%;
            
            
        }
    </style>

</head>
<body>
    <div id="app">
        <table class="gridtable">
            <tr>
                <th>学科</th>
                <th>分数</th>
            </tr>
            <tr><td>语文</td>
                <td><input type="text" name="" id="" v-model.number="chinese"/></td>
            </tr>
            <tr><td>数学</td>
                <td><input type="text" name="" id="" v-model.number="math"/></td>
            </tr>
            <tr><td>英语</td>
                <td><input type="text" name="" id="" v-model.number="english"/></td>
            </tr>
            <tr><td>总分</td>
                <td><input type="text" name="" id="" v-model.number="sum"/></td>
            </tr>
            <tr><td>平均分</td>
                <td><input type="text" name="" id="" v-model.number="average"/></td>
            </tr>
        </table>
    </div>
    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script type="text/javaScript">

            new Vue({
                el:'#app',
                data:{
                    chinese:90,
                    math:80,
                    english:90,
                },
                computed:{
                        sum:function(){
                           
                            return    ((this.chinese+this.math)+this.english);
                            
                            // return (this.chinese)+(this.math)+(this.english);
                        },
                        average:function(){
                            return Math.round(this.sum/3);
                        }
                    }
            })
    </script>
</body>
</html>